<!--{template admin/header}-->
    <style type="text/css">
        .jcrop-holder { text-align: left; }
        .jcrop-vline, .jcrop-hline
        {font-size: 0;position: absolute;background: white url('./static/image/jcrop.gif') top left repeat;}
        .jcrop-vline { height: 100%; width: 1px !important; }
        .jcrop-hline { width: 100%; height: 1px !important; }
        .jcrop-handle {
        	font-size: 1px;
        	width: 7px !important;
        	height: 7px !important;
        	border: 1px #eee solid;
        	background-color: #333;
        	*width: 9px;
        	*height: 9px;
        }
        .jcrop-tracker { width: 100%; height: 100%; }
        .custom .jcrop-vline,
        .custom .jcrop-hline{background: yellow;}
        .custom .jcrop-handle{border-color: black;background-color: #C7BB00;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
        .Image {
			 max-width:600px;height:auto;cursor:pointer;
			 border:1px dashed #4E6973;
			 zoom:expression( function(elm) {
				 if (elm.width>540) {
					 var oldVW = elm.width; elm.width=540;
					 elm.height = elm.height*(540 /oldVW);
				 }
				 elm.style.zoom = '1';
			 }(this));
		 }
    </style>
    <script type="text/javascript" src="static/js/jquery.Jcrop.js"></script>
    <script language="Javascript">
    	function upload_face()
    	{
    		// Remember to invoke within jQuery(window).load(...)
    		// If you don't, Jcrop may not initialize properly
    		jQuery(document).ready(function(){

    			jcrop_init();

    		});    		
    	}        
        function jcrop_init()
        {
            jQuery('#cropbox').Jcrop({
                    minSize: [ 40, 40 ],
                    maxSize: [ 600, 600 ],
                    aspectRatio: 1,
    				setSelect: [ 0, 0, 200, 200 ],
    				onChange: jcrop_showCoords,
    				onSelect: jcrop_showCoords
    			});
        }        
        // Our simple event handler, called from onChange and onSelect
		// event handlers, as per the Jcrop invocation above
		function jcrop_showCoords(c)
		{
			jQuery('#x').val(c.x);
			jQuery('#y').val(c.y);
			jQuery('#w').val(c.w);
			jQuery('#h').val(c.h);
		};
        <!--{if $temp_face}-->
            upload_face();
        <!--{/if}-->
        
    </script>


	<span style="font-size:12px; color:#333; display:block; margin:10px 0;">
		1、请先点下面“浏览”按钮选择头像图片，系统会自动上传并显示在下面正方形框内；<br>
		（头像支持JPG、GIF和PNG格式，文件大小<i style="color:#ff0000">2M</i>以内，最小尺寸440*440）
	</span>

	<div>
	<div>
		<iframe id="uploadface" name="uploadface" width="0" height="0" marginwidth="0" frameborder="0" src="about:blank"></iframe>
		<form method="post" action="ajax.php?mod=upload&code=face" enctype="multipart/form-data" name="face_form" target="uploadface" id="face_form">
            <input type="hidden" id="temp_face" name="temp_face" value="" />
		    <input id="idFile" name="face" type="file" onchange="if(false != idFileChange()) {this.disabled='true';}"/>
		</form>
		<script type="text/javascript">
			function idFileChange() {				
				var idv = $('#idFile').val();
				if('' == idv || false == /\.(gif|jpg|jpeg|png)$/i.test(idv)) {
					alert('请选择正确的图片类型');
					return false;
				} else {
					document.getElementById('face_form').submit();
					alert('正在上传头像，请不要刷新页面');
					return true;
				}						
			}
		</script>
	</div><br />


        <span id="jcrop_init_id" onclick="jcrop_init();"></span>
		<div>2、用鼠标在头像上拖拉选择剪裁区域，最后点确认剪裁完成修改。<br>
		<img src="{$member[face_original]}" id="cropbox" onclick="upload_face();" border="0" alt="" class="Image" /></div>


		<form action="admin.php?mod=member&code=do_modify_face" method="post" id="crop_form">
		    <input type="hidden" id="uid" name="uid" value="{$uid}"/>
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />
			<input name="img_path" value="{$member['face']}" type="hidden" id="img_path" /><br />

			<input type="submit" value="确认剪裁" id="crop_submit" class="button" />
			<input type="button" value="取消" class="button" onclick="location.href='admin.php?mod=member&code=editface&uid={$uid}';" />
		</form>
		<div><span class="W_spetxt" >* </span>修改头像后如果没有立即生效，请按Ctrl+F5强制刷新即可</div>
	</div>